<template>
  <div class="preferential">
    <div class="sticky left-0 right-0 top-0 z-9 h-full bg-hex-ffffff px-28rpx pb-32rpx">
      <div class="z-999 flex items-center justify-between" :style="{ paddingTop: `${searchBarTop}px` }" @click.stop="goback">
        <uni-icons type="back" size="28" />
        <span class="flex-1 text-36rpx" style="text-align: center;">{{ title }}</span>
      </div>
    </div>
    <div class="mb-32rpx p-32rpx">
      <div class="title flex items-center">
        <div class="limited text-28rpx text-hex-333">{{ title }}</div>
      </div>
      <div class="mt-32rpx">
        <div class="box-border rounded-t-32rpx">
          <s-waterfall :datalist="goodsList" :column="2">
            <template #default="{ item }">
              <div class="mb-30rpx mr-28rpx rounded-32rpx bg-hex-fff pb-10rpx" @click="navTo(`/pages-shop/goodsdetails?productId=${item.productId}`)">
                <div class="bg-water box-border w-326rpx flex items-center justify-center rounded-xl bg-hex-fff p-40rpx">
                  <image
                    class="will-change h-100% w-100% rounded-24rpx"
                    lazy-load
                    :src="item.productImage" mode="widthFix" />
                </div>
                <div class="p-15rpx">
                  <text
                    class="multiLine-hiddle textHide2 mx-10rpx mt-10rpx inline-block text-24rpx text-hex-333">{{ item.productName }}</text>
                  <div
                    v-if="item.newState===1"
                    class="my-20rpx w-48rpx rounded-5rpx bg-hex-FFF2E3 p-3rpx text-20rpx font-500 text-hex-E89C43">
                    上新
                  </div>
                  <div class="flex items-center justify-between">
                    <div>
                      <div class="flex items-end">
                        <div class="text-34rpx font-400 text-hex-ff4d4e">¥{{ item.productPrice }}</div>
                        <div class="textdecor ml-10rpx text-24rpx font-500 text-hex-999">￥{{ item.cost }}</div>
                      </div>
                      <div class="textdecor text-24rpx font-500 text-hex-999">已售{{ item.saleNum??0 }}</div>
                    </div>
                    <image :src="`${cdnUrl}/imgs/shop/cart-icon.png${imgVersion}`" class="h-44rpx w-44rpx" />
                  </div>
                </div>
              </div>
            </template>
          </s-waterfall>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang='ts' setup>

let searchBarTop: any = $ref('24')
let rightBar: any = $ref(0)
onLoad((options) => {
  if (options) {
    title = options.title
  }
  // #ifndef H5
  let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
  searchBarTop = menuButtonInfo.top
  rightBar = menuButtonInfo.width

  // #endif
})
let topHight = $ref(0)
let title = $ref('')
const goback = () => {
  uni.navigateBack({
    delta: 1,
  })
}
let goodsList: any[] = $ref([])
let pageNo = $ref(1)
let totalPage = $ref(0)
//type:1商品推荐；2新品推荐
const getShopList = async (type) => {
  let res: any = null
  const data = {
    method: 'get',
    data: { appType: 3, pageNo, pageSize: 10 },
  }
  if (type === 1) {
    res = await Fetch('/qqyapi/product/product/categoryArea/recommendProductList', data)
  } else if (type === 2) {
    res = await Fetch('/qqyapi/product/product/categoryArea/newProductList', data)
  }
  const { data: resData, error, status } = res as any
  if (status === 200 && resData.code === 0) {
    goodsList = [...goodsList, ...resData.result.list]
    totalPage = resData.result.totalPage
  }
}
watch(() => title, () => {
  pageNo = 1
  if (title === '商品推荐') {
    getShopList(1)
  } else if (title === '新品上市') {
    getShopList(2)
  } else {
    console.error('类型错误')
  }
})


//下滑加载更多数据
const getMoreData = () => {
  if (totalPage !== pageNo) {
    pageNo++
    if (title === '商品推荐') {
      getShopList(1)
    } else if (title === '新品上市') {
      getShopList(2)
    }
  }
}
onReachBottom(() => {
  getMoreData()
})
</script>

<style lang='scss'>
.preferential{
  .textHide2 {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .limited{
    position: relative;
    flex: 1;

    &::after {
      content: 'NEW';
      position: absolute;
      padding-left: 8rpx;
      padding-right: 8rpx;
      left: 120rpx;
      top:-10rpx;
      text-align: center;
      line-height: 36rpx;
      font-size: 18rpx;
      color: #fff;
      background: #F4B265;
      border-radius: 13rpx 18rpx 18rpx 0rpx;
    }
  }
}
</style>
